<template>
    <div class="photo-list-background" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="photoSelectedAlbumList" style="width: 100%">
            <!-- <img class="photo-list-left-album" :src= '"/api/cover/" + item.localIdentifier'> -->
        <div class="photo-list-bottom">
            <!-- 左侧试图 -->
            <div class="photop-list-left">
                <!-- 左侧的相册图片 -->
                <el-card class="photo-list-lest-elcard">
                    <div slot="header">
                        <span>相册列表</span>
                    </div>
                    <div class="phont-list-left-box" v-for="(item,index) in phoneAlbumLists" :key="item.photoIndex">
                        <div class="photo-list-left-cover">
                            {{ item.albumName }}:({{item.count}})
                        </div>
                        <img @click="photoAlbumSlected(index)" class="photo-list-left-album" :src= '"/api/cover/" + item.localIdentifier'>
                    </div>
                </el-card>
            </div>

            <!-- 右侧试图   /photoDetail -->
            <div class="photo-list-right">
                <div class="imageBox" :span="photoSelectedAlbumList.length" v-for="(item,index) in photoSelectedAlbumList" :key="index">
                        <div class="photo-list-right-box">
                            <div class="photo-list-right-image-cover">
                                <div class="download-back-cover">
                                  <div class="download-herf">
                                    <a target="_blank" :href='"/api/api/downLoad1/" + item.assetsLibrary'>点击下载</a>
                                  </div>
                                    <div class="name-style">
                                      <a>{{ item.fileName}} {{ item.videoTime }}</a>
                                    </div>
                                </div>
                            </div>
                            <img class="photo-list-right-box-icon" :src= '"/api/photoDetail/" + item.assetsLibrary'>
                        </div>
                </div>
               </div>
        </div>
        
    </div>

</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      msg: "123",
      phoneAlbumLists: this.$route.query.dataSource,
      selectedIndex: this.$route.query.selectedIndex,
      photoSelectedAlbumList: [],
      loading: true
    };
  },
  created() {
    //加载封面照片接口
    this.loadPhoneAlbumList();
    //加载选中列接口
    this.loadPhoneSelectedAlbumPhoneList();
  },
  methods: {
    loadPhoneAlbumList() {
      axios
        .get("/api/media_list")
        .then(res => {
          this.phoneAlbumLists = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    loadPhoneSelectedAlbumPhoneList() {
      this.loading = true;
      this.photoSelectedAlbumList = [];
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      axios
        .get("/api/photoList", { params: { photoIndex: this.selectedIndex } })
        .then(res => {
          this.loading = false;
          this.photoSelectedAlbumList = res.data;
          console.log(this.photoSelectedAlbumList);
        })
        .catch(error => {
          console.log(error);
        });
    },
    photoAlbumSlected(index) {
      this.selectedIndex = index;
      this.loadPhoneSelectedAlbumPhoneList();
    }
  }
};
</script>

<style>
.photo-list-background {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.photo-list-bottom {
  display: flex;
  flex: 1;
}
.el-card__body {
  padding: 10px;
}
.photop-list-left {
  width: 200px;
}
.photo-list-lest-elcard {
  display: flex;
  flex-direction: column;
}
.phont-list-left-box {
  clear: both;
  width: 180px;
  height: 180px;
  margin-bottom: 10px;
  /* 相对定位 */
  position: relative;
}
.photo-list-left-cover {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}
.photo-list-left-album {
  width: 180px;
  height: 180px;
}

.photo-list-right {
  flex: 1;
  margin: 60px;
}
.photo-list-right .imageBox{
  float: left;
  margin: 10px;
  padding: 10px;
  border: 5px #DCDFE6 solid;
  background-color: #F2F6FC;
}

.photo-list-right-box {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #f2f6fc;
}

.photo-list-right-box-icon {
  width: 300px;
  height: 300px;
}

.photo-list-right-image-cover {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0px;
}
.photo-list-right-image-cover a {
  line-height: 40px;
  color: white;
}

.download-back-cover {
  width: 100%;
  height: 100%;
  position: relative;
}
.download-herf {
  position: absolute;
  left: 0px;
  line-height: 40px;
}
.name-style {
  position: absolute;
  right: 0px;
  color: white;
  height: 40px;
  width: 200px;
}

</style>


// assetsLibrary:"assets-library://asset/asset.MP4?id=ABAFC307-7528-49F4-9260-6D27F6D3C803&ext=MP4"
// fileName:"IMG_1661.MP4"
// fileURLType:"MP4"
// localIdentifier:"ABAFC307-7528-49F4-9260-6D27F6D3C803"
// photoLocalIdentifier:"ABAFC307-7528-49F4-9260-6D27F6D3C803/L0/001"
// photoSubType:1
// photoType:3
// videoTime:"00:29"